<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="/js/jquery2.1.4.min.js"></script>
    <script src="/js/jquery.qrcode.min.js"></script>
    <script src="/js/assets/amazeui.widgets.helper.min.js"></script>
    <script src="/js/assets/amazeui.widgets.helper.js"></script>
    <script src="/js/assets/amazeui.ie8polyfill.min.js"></script>
    <script src="/js/assets/amazeui.ie8polyfill.js"></script>
    <script src="/js/assets/amazeui.min.js"></script>
    <script src="/js/assets/amazeui.js"></script>
    <script src="/js/mui.min.js"></script>
    <script src="/js/bootstrap-treeview.js"></script>


    <link rel="stylesheet" type="text/css" href="/css/assets/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="/css/assets/amazeui.css">
    <link rel="stylesheet" type="text/css" href="/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">

    <style>
        body{
            font-size: 12px;
        }
        .am-u-sm-10{
            width: 58%;
        }
        .am-u-sm-2{
            width: auto;
        }
        .am-form-group{
            height: 30px;
            margin: 0;
        }
        img.am-thumbnail, .am-thumbnail > img, .am-thumbnail a > img{
            margin-top: 115px;
        }
        form{
            height: 100%;
        }
        .am-btn am-btn-danger{
            height: 20px;
            font-size: 5px;
            padding: 0 23px;
        }
        button, input:not([type="radio"]):not([type="checkbox"]), select{
            height: 20px;
            border: none;
            background: none;
            text-align: right;
            font-size: 12px;
        }
        [class*="am-u-"] + [class*="am-u-"]:last-child{
            float: right;
            height: 20px;
            background: none;
            text-align: right;
        }
        #sub{
            background: red;
            height: 50px;
            width: 100%;
            text-align: center;
            margin-top: 20%;
        }
        #middlePopover1{
            width: 68%;
            position: absolute;
            top: 100px;
            left: 18%;
            display: none;
        }
        #bg {
            width: 100%;
            height: 100%;
            background-color: #000;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.3;
            display: none;
        }
        #TageBranchID{
            display: inline;
            width:136px;
        }
        .mui-scroll-wrapper{
            font-size:14px;
            background: white;
        }
        .am-btn am-btn-danger{
            height: 20px;
            font-size: 5px;
            padding: 0 23px;
        }
        #middlePopover1{
            height: 200px;
        }
    </style>
</head>
<body>
<form action="/saveMember" method="post" enctype="multipart/form-data">
    <div class="am-g">

        <div class="am-u-sm-8">
            <div class="am-form-group">
                <label for="fd_userName" class="am-u-sm-2 am-form-label">姓名</label>
                <div class="am-u-sm-10">
                    <input type="hidden" hidden="hidden" th:value="${member.getFd_loginId()}" name="fd_loginId">
                    <input  type="text" class="am-form-field" id="fd_UserName" name="fd_UserName" th:value="${member.getFd_UserName()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_Birthday" class="am-u-sm-2 am-form-label">生日</label>
                <div class="am-u-sm-10">
                    <input  type="text" class="am-form-field" id="fd_Birthday" name="fd_Birthday" th:value="${member.getFd_Birthday()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_Gender" class="am-u-sm-2 am-form-label">性别</label>
                <div class="am-u-sm-10">
                    <input  type="text" class="am-form-field" id="fd_Gender" name="fd_Gender" th:value="${member.getFd_Gender()}">
                </div>

            </div>

            <div class="am-form-group">
                <label for="fd_Educational" class="am-u-sm-2 am-form-label">个人学历</label>
                <div class="am-u-sm-10">
                    <input  type="text" class="am-form-field" id="fd_Educational" name="fd_Educational" th:value="${member.getFd_Educational()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_Nation" class="am-u-sm-2 am-form-label">民族</label>
                <div class="am-u-sm-10">
                    <input  type="text" class="am-form-field" id="fd_Nation" name="fd_Nation" th:value="${member.getFd_Nation()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_NativePlace" class="am-u-sm-2 am-form-label">出生地</label>
                <div class="am-u-sm-10">
                    <input  type="text" class="am-form-field" id="fd_NativePlace" name="fd_NativePlace" th:value="${member.getFd_NativePlace()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_PoliticsLineament" class="am-u-sm-2 am-form-label">政治面貌</label>
                <div class="am-u-sm-10">
                    <input  type="text" class="am-form-field" id="fd_PoliticsLineament" name="fd_PoliticsLineament" th:value="${member.getFd_PoliticsLineament()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_IdentityCard" class="am-u-sm-2 am-form-label">身份证号</label>
                <div class="am-u-sm-10">
                    <input type="text"  class="am-form-field" id="fd_IdentityCard" name="fd_IdentityCard" th:value="${member.getFd_IdentityCard()}">
                </div>
            </div>

            <div class="am-form-group">
                <label for="fd_Address" class="am-u-sm-2 am-form-label">联系地址</label>
                <div class="am-u-sm-10">
                    <input type="text"  class="am-form-field" id="fd_Address" name="fd_Address" th:value="${member.getFd_Address()}">
                </div>
            </div>
            <div class="am-form-group">
                <label for="fd_Address" class="am-u-sm-2 am-form-label">通讯手机</label>
                <div class="am-u-sm-10">
                    <input type="text" class="am-form-field" id="fd_MobileNo" name="fd_MobileNo" th:value="${member.getFd_MobileNo()}">
                </div>
            </div>

        </div>
        <div class="am-u-sm-4">
            <img class="am-thumbnail" th:src="${member.getFd_ImageUrl()}" alt=""/>
            <input class="-btn am-btn-primary" type="file" id="imgName" name="imgName">
        </div>
    </div>
    <input th:value="${member.getFd_menbertype()}" hidden="hidden" type="hidden" name="fd_menbertype">

    <div class="am-form-group" th:if="${member.getFd_menbertype()} gt 1">
        <label class="am-u-sm-2 am-form-label">要加入的党组织</label>
        <div class="am-u-sm-10">

        </div>
    </div>

    <div class="am-form-group" th:if="${member.getFd_reason()}">
        <label for="fd_Address" class="am-u-sm-2 am-form-label">不通过原因</label>
        <div class="am-u-sm-10">
            <input type="text" readonly="readonly" class="am-form-field" id="reason" th:value="${member.getFd_reason()}">
        </div>
    </div>

    <input th:if="${member.getFd_menbertype()} gt 1" readonly="readonly" type="text" class="am-form-field" name="fd_branchName" th:value="${member.getFd_branchName()}" style="text-align: left">
    <input th:if="${member.getFd_menbertype()} gt 1" readonly="readonly" type="text" class="am-form-field" name="fd_branchName" th:value="${member.getFd_branchId()}" style="text-align: left">

    <div th:if="${member.getFd_menbertype()} le 1">
        <div class="am-form-group">
            <label for="TageBranchID" class="am-u-sm-2 am-form-label">加入党组织</label>
            <div class="am-u-sm-10">
                <input type="text" id="fd_TageBranchID" name="fd_branchId" th:value="${member.getFd_branchId()}" hidden="hidden">
                <input type="text" id="TageBranchID" name="fd_branchName" th:value="${member.getFd_branchName()}" class="am-form-field">
                <a href="#middlePopover1" class="am-btn am-btn-danger" onclick="middleBolck()">请选择</a>
            </div>
        </div>
    </div>



    <input type="submit" th:value="${submitValue}" id="sub" class="am-btn am-btn-danger">

</form>
<div id="bg" onclick="middleNone()"></div>
<div id="middlePopover1" class="mui-popover" >
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll" id="treeview-searchable1">
        </div>
    </div>
</div>
</body>
<script>
    mui('.mui-scroll-wrapper').scroll();
    function middleBolck(){
        var middlePopover1=document.getElementById("middlePopover1");
        middlePopover1.style.display="block";
        var s = document.getElementById("bg");
        s.style.display = "block";
    }

    function middleNone(){
        var middlePopover1=document.getElementById("middlePopover1");
        middlePopover1.style.display="none";
        var s = document.getElementById("bg");
        s.style.display = "none";
    }

    loadPart2();
    function loadPart2(){
        //$("#middlePopover .mui-table-view").;
        var li="";
        $.ajax({
            url:'getTblPartyOrgBranchAll',
            dataType:'text',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            success:function(data){
                var jsondata=JSON.parse(data);
                console.log(jsondata);
                var $searchableTree = $('#treeview-searchable1').treeview({
                    data: jsondata,
                    onNodeSelected: function(event, node) {
                        console.log(node.text);
                        $("#TageBranchID").val(node.text);
                        $("#fd_TageBranchID").val(node.fd_BranchID);
                        $("#middlePopover1").hide();
                        $("#bg").hide();
                        $(".mui-backdrop").remove();
                    },

                });

            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                console.log(type);
            }
        });
    }
</script>
</html>